<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 69 67"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#F3F9FF" d="M50.442 38.047c.32 0 .632.027.94.075.048-.12.079-.25.079-.387a1.016 1.016 0 1 0-1.953.387c.302-.048.613-.075.934-.075Zm0 19.977h-3.467c-.03.188-.052.375-.052.572a3.518 3.518 0 1 0 7.037 0c0-.194-.02-.384-.051-.572h-3.467Z"/><rect fill="#06F" rx="10" height="58" width="53" x=".513"/><circle fill="#002A54" r="19.178" cy="47.822" cx="49.643"/><path fill="#F3F9FF" d="M36.513 37.5a3.5 3.5 0 1 0 7 0 3.5 3.5 0 0 0-7 0Z"/><path fill="#F3F9FF" d="M58.146 35.133h-1.437c-.667-8.705-7.624-15.663-16.33-16.33v-1.436a1.367 1.367 0 1 0-2.733 0v1.436c-8.706.667-15.663 7.625-16.33 16.33h-1.437a1.367 1.367 0 1 0 0 2.734h1.436c.668 8.705 7.625 15.663 16.33 16.33v1.436a1.367 1.367 0 1 0 2.734 0v-1.436c8.706-.667 15.663-7.625 16.33-16.33h1.437a1.367 1.367 0 1 0 0-2.734Zm-17.767 16.33V48.8a1.367 1.367 0 1 0-2.733 0v2.664c-7.2-.652-12.945-6.398-13.597-13.597h2.663a1.367 1.367 0 1 0 0-2.734H24.05c.652-7.2 6.397-12.945 13.597-13.597V24.2a1.367 1.367 0 1 0 2.733 0v-2.664c7.2.654 12.945 6.398 13.597 13.597h-2.663a1.367 1.367 0 0 0 0 2.734h2.663c-.652 7.2-6.397 12.945-13.597 13.597Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Help6 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
